<template>
	<view class="uni-popup-share">
		<!-- <view class="uni-share-title"><text class="uni-share-title-text">{{title}}</text></view> -->
		<view class="uni-share-content">
			<!-- <text class="zxw_report_title">分享到</text> -->
			<scroll-view v-if="share" class="zxw_report_content" scroll-x="true" show-scrollbar="false">
				<view class="uni-share-content-item" v-for="(item,index) in shareList" :key="index" @click.stop="select(item,index)">
					<view :class="'uni-share-bg '">
						<image class="uni-share-image" :src="item.icon" mode="scaleToFill"></image>
					</view>
					<text class="uni-share-text">{{item.text}}</text>
				</view>
			</scroll-view>
			<view v-if="qt" class="zxw_report_box zxw_report_box_border">
				<scroll-view class="zxw_report_content" scroll-x="true" show-scrollbar="false">
					<block v-for="(item,index) in qtList" :key="index">
						<view v-if="item.show" class="uni-share-content-item" @click.stop="select(item,index)">
							<view class="uni-share-bg">
								<image class="uni-share-image" :src="item.icon" mode="scaleToFill"></image>
							</view>
							<text class="uni-share-text">{{item.text}}</text>
						</view>
					</block>
				</scroll-view>
			</view>
			<!-- 举报 -->
			<view v-if="report" class="zxw_report_box zxw_report_box_border">
				<!-- <text class="zxw_report_title">举报</text> -->
				<scroll-view class="zxw_report_content" scroll-x="true" show-scrollbar="false">
					<!-- 选择样式 report_item_active -->
					<text v-for="(item,index) in reportList" :key="index" :class="item.selected?'report_item report_item_active':'report_item'">{{item.name}}</text>
				</scroll-view>
			</view>
		</view>
		<!-- 取消 -->
		<view v-if="showClose" class="uni-share-button-box" @click="close">
			<text class="uni-share-button">取消</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'UniPopupShare',
		props: {
			share: {
				type: Boolean,
				default: true
			},
			qt: {
				type: Boolean,
				default: true
			},
			report: {
				type: Boolean,
				default: false
			},
			qtItems: {
				type: Array,
				default: () => []
			},
			showClose: {
				type: Boolean,
				default: true
			}
		},
		/**
		 * 监听 属性变化
		 */
		watch: {
			qtItems: {
				handler(newVal) {
					if (newVal != null && newVal.length > 0) {
						let that = this;
						for (let i = 0; i < this.qtList.length; i++) {
							let currentJson = newVal.find(function(item, index) {
								if (item.name == that.qtList[i].name) {
									return item;
								}
							});
							if (currentJson != null) {
								this.qtList[i].show = true;
								if (currentJson.text != null)
									this.qtList[i].text = currentJson.text;
							}

						}
					}
				},
				immediate: true //对象内部的属性监听，也叫深度监听
			}
		},
		inject: ['popup'],
		data() {
			return {
				shareList: [{
						text: '微信好友',
						icon: '/static/share/share_wechat.png',
						name: 'wx',
						bg: 'wechat_bg'
					},
					{
						text: '朋友圈',
						icon: '/static/share/share_circle.png',
						name: 'wx',
						bg: 'pengyouquan_bg'
					},
					{
						text: 'QQ',
						icon: '/static/share/share_qq.png',
						name: 'qq',
						bg: 'qq_bg'
					},
					{
						text: '新浪',
						icon: '/static/share/share_weibo.png',
						name: 'sina',
						bg: 'sina_bg'
					},
					{
						text: '空间',
						icon: '/static/share/share_qzone.png',
						name: 'qzone',
						bg: 'qzone_bg'
					}
				],
				qtList: [{
						text: '屏蔽',
						icon: '/static/share/toast_shield.png',
						name: 'shield',
						show: false
					},
					{
						text: '收藏',
						icon: '/static/share/icon_option_favorite.png',
						name: 'collect',
						show: false
					}, {
						text: '举报',
						icon: '/static/share/icon_option_report.png',
						name: 'report',
						show: true
					}, {
						text: '置顶',
						icon: '/static/share/icon_option_top_post.png',
						name: 'top',
						show: false
					}, {
						text: '删除',
						icon: '/static/share/icon_option_delete.png',
						name: 'delete',
						show: false
					}
				],
				reportList: [{
					name: '垃圾广告',
					selected: false
				}, {
					name: '色情低俗',
					selected: false
				}, {
					name: '攻击谩骂',
					selected: false
				}, {
					name: '诈骗信息',
					selected: false
				}, {
					name: '政治敏感',
					selected: false
				}, {
					name: '血腥暴力',
					selected: false
				}, {
					name: '网络赌博',
					selected: false
				}],
			}
		},
		created() {},
		methods: {
			/**
			 * 选择内容
			 */
			select(item, index) {
				this.$emit('select', {
					item,
					index
				}, () => {
					this.popup.close()
				})
			},
			/**
			 * 关闭窗口
			 */
			close() {
				if (this.popup != null)
					this.popup.close();
				else {
					uni.getCurrentSubNVue().hide('auto');
				}
			}
		}
	}
</script>
<style scoped>
	.uni-popup-share {
		background-color: #FFFFFF;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		flex: 1;
	}

	.uni-share-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 40px;
	}

	.uni-share-title-text {
		font-size: 14px;
		color: #666;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		padding: 10px 0;
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		width: 360px;
		margin: 10px 0;
	}

	.zxw_report_box_border {
		border-top-width: 1px;
		border-top-color: #EEEEEE;
	}

	.uni-share-content-item {
		width: 80px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.uni-share-bg {
		width: 50px;
		height: 50px;
		border-radius: 50px;
		align-items: center;
		justify-content: center;
	}

	.qq_bg {
		background-color: #37B9FF;
	}

	.wechat_bg {
		background-color: #2AA515;
	}

	.qzone_bg {
		background-color: #F5C01C;
	}

	.sina_bg {
		background-color: #F35D5D;
	}

	.pengyouquan_bg {
		background-color: #4CC85C;
	}

	.uni-share-qt-bg {
		background-color: #EEEEEE;
	}

	/* 	.uni-share-content-item:active {
		background-color: #f5f5f5;
	} */

	.uni-share-image {
		width: 50px;
		height: 50px;
	}

	.uni-share-text {
		margin-top: 10px;
		font-size: 12px;
		color: #3B4144;
	}

	.uni-share-button-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 15px 25px;
		justify-content: center;
		background-color: #f4f4f4;
		align-items: center;
	}

	.uni-share-button {
		color: #666666;
		font-size: 15px;
	}


	/*************自定义样式***************/
	.zxw_report_box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		padding: 5px 0;
		flex: 1;
		flex-direction: column;
	}

	.zxw_report_title {
		font-size: 13px;
		font-weight: 500;
		color: #666666;
	}

	.zxw_report_content {
		flex-direction: row;
		margin: 15px 0;
		margin-bottom: 10px;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
	}

	.report_item {
		padding: 10px 15px;
		align-items: center;
		justify-content: center;
		border-width: 1px;
		border-color: #bcbcbc;
		border-style: solid;
		color: #666666;
		border-radius: 8px;
		margin: 0 5px;
		font-size: 13px;
		text-align: center;
	}

	.report_item_active {
		color: #007AFF;
		border-color: #007AFF;
	}
</style>
